<template>
  <div>

    <!-- 表单 -->
    <el-form size="small" :model="form" :inline="true">
      <el-form-item label="标题" style="font-weight:bold;">
        <el-input v-model="form.title" placeholder="请输入标题" style="width:200px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="发布人" style="font-weight:bold;">
        <el-input v-model="form.createName" placeholder="请输入发布人" style="width:200px;" clearable></el-input>
      </el-form-item>
      <el-form-item label="类型 :" style="font-weight:bold;">
        <el-select v-model="form.type" placeholder="请选择类型" clearable>
          <el-option label="新闻资讯" value="0"></el-option>
          <el-option label="信息公告" value="1"></el-option>
          <el-option label="报修须知" value="2"></el-option>
          <el-option label="消息通知" value="3"></el-option>
          <!-- <el-option label="劳动教育报名" value="4"></el-option> -->
          <el-option label="迎新服务" value="5"></el-option>
          <el-option label="小程序首页通知" value="6"></el-option>

        </el-select>
      </el-form-item>

      <el-button size="small" class="search_button" type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <!-- 表单 -->
    <el-row>
      <el-button size="small" class="newly_button" type="primary" icon="el-icon-folder-add"
        @click="dialog_newly = true">新增</el-button>
    </el-row>

    <el-divider></el-divider>
    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border>
      <!-- <el-table-column type="selection" width="50" align="center"></el-table-column> -->
      <!-- <el-table-column prop="id" label="序号" align="center"></el-table-column> -->
      <el-table-column prop="title" label="标题" align="center"></el-table-column>
      <el-table-column prop="type" label="类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 0">新闻咨询</span>
          <span v-if="scope.row.type == 1">信息公告</span>
          <span v-if="scope.row.type == 2">报修须知</span>
          <span v-if="scope.row.type == 3">消息通知</span>
          <!-- <span v-if="scope.row.type == 4">劳动教育报名</span> -->
          <span v-if="scope.row.type == 5">迎新服务</span>
          <span v-if="scope.row.type == 6">小程序首页通知</span>

        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0" style="color:#67C23A;">正常</span>
          <span v-if="scope.row.state == 1" style="color:red">停用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="发布人" align="center"></el-table-column>
      <el-table-column prop="modifyTime" label="发布时间" align="center" width="160"></el-table-column>
      <el-table-column prop="handle" label="操作" align="center" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="text" plain @click="updateNotice(scope.row)" icon="el-icon-edit">修改</el-button>
          <el-button size="mini" type="text" plain @click="deleteNotice({ id: scope.row.id })"
            icon="el-icon-delete">删除</el-button>
          <!-- <el-button size="mini" type="text" plain v-if="scope.row.type == 4" icon="el-icon-view"
            @click="showDetail(scope.row)">查看报名详情</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加公告弹窗 -->
    <el-dialog title="添加公告" :visible.sync="dialog_newly" top="5vh" width="70%">
      <el-form :model="formNew" :label-position="labelPosition" label-width="80px" style="margin-left:5%;" inline>
        <el-form-item label="标题 :" style="font-weight:bold;" v-show="formNew.type != 6">
          <el-input v-model="formNew.title" placeholder="请输入标题" style="width:300px" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型 :" style="font-weight:bold;">
          <el-select v-model="formNew.type" placeholder="请选择类型" style="width:300px" clearable>
            <el-option label="新闻资讯" value="0"></el-option>
            <el-option label="信息公告" value="1"></el-option>
            <el-option label="报修须知" value="2"></el-option>
            <el-option label="消息通知" value="3"></el-option>
            <!-- <el-option label="劳动教育报名" value="4"></el-option> -->
            <el-option label="迎新服务" value="5"></el-option>
            <el-option label="小程序首页通知" value="6"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="状态 :" style="font-weight:bold;">
          <el-select v-model="formNew.state" placeholder="请选择状态" style="width:300px" clearable>
            <el-option label="启用" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="封面插图 :" style="font-weight:bold;">
          <el-upload class="avatar-uploader" action="https://qy-logis.oss-cn-hangzhou.aliyuncs.com/"
            :show-file-list="false" :on-progress="handleAvatarProgress" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="formNew.cover" :src="formNew.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="内容 :" style="font-weight:bold;" v-show="formNew.type != 6">
          <quill-editor class="ql-editor" ref="myTextEditor" v-model="formNew.content" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
            @change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>
        <el-form-item label="标题 :" style="font-weight:bold;" v-show="formNew.type == 6">
          <el-input type="textarea" v-model="formNew.title" placeholder="请输入" style="width:500px" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_newly = false" class="dialogbutton">取 消</el-button>
        <el-button type="primary" @click="addNotice" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加公告弹窗 -->

    <!-- 修改公告弹窗 -->
    <el-dialog title="修改公告" :visible.sync="dialog_change" top="5vh" width="70%">
      <el-form :model="formChange" :label-position="labelPosition" label-width="80px" style="margin-left:8%;" inline>
        <el-form-item label="公告标题 :" style="font-weight:bold;" v-show="formChange.type != 6">
          <el-input v-model="formChange.title" style="width:300px" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="类型 :" style="font-weight:bold;">
          <el-select v-model="formChange.type" placeholder="请选择类型" style="width:300px" clearable>
            <el-option label="新闻资讯" value="0"></el-option>
            <el-option label="信息公告" value="1"></el-option>
            <el-option label="报修须知" value="2"></el-option>
            <el-option label="消息通知" value="3"></el-option>
            <!-- <el-option label="劳动教育报名" value="4"></el-option> -->
            <el-option label="迎新服务" value="5"></el-option>
            <el-option label="小程序首页通知" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" style="font-weight:bold;">
          <el-select v-model="formChange.state" placeholder="请选择状态" style="width:300px" clearable>
            <el-option label="启用" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间" style="font-weight:bold;">
          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formChange.modifyTime" type="datetime"
            placeholder="选择日期时间" style="width:300px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="内容 :" style="font-weight:bold;" v-show="formChange.type != 6">
          <quill-editor class="ql-editor" ref="myTextEditor" v-model="formChange.content" :options="editorOption"
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
            @change="onEditorChange($event)">
          </quill-editor>
        </el-form-item>
        <el-form-item label="标题 :" style="font-weight:bold;" v-show="formChange.type == 6">
          <el-input type="textarea" v-model="formChange.title" placeholder="请输入" style="width:500px" clearable></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_change = false">取 消</el-button>
        <el-button type="primary" @click="updateNoticeConfirm" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改公告弹窗 -->

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

    <el-drawer title="报名详情" :visible.sync="drawer" direction="rtl" size="80%">
      <!-- 表单 -->
      <el-form size="small" :model="formDetail" :inline="true">
        <el-form-item label="学号" style="font-weight:bold;">
          <el-input v-model="formDetail.userNum" placeholder="请输入学号" style="width:200px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名" style="font-weight:bold;">
          <el-input v-model="formDetail.name" placeholder="请输入姓名" style="width:200px;" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话" style="font-weight:bold;">
          <el-input v-model="formDetail.phone" placeholder="请输入电话" style="width:200px;" clearable></el-input>
        </el-form-item>

        <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
          @click="getApply">查询</el-button>
        <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="resetApply">重置</el-button>
      </el-form>
      <!-- 表单 -->

      <el-table size="medium" :data="tableDataDetail" tooltip-effect="dark" style="width: 100%" border>
        <el-table-column prop="userNum" label="学号" align="center"></el-table-column>
        <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" align="center">
          <template slot-scope="scope">
            <span v-if="(scope.row.sex == 0)">女</span>
            <span v-if="(scope.row.sex == 1)">男</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
        <!-- <el-table-column prop="" label="院系" align="center"></el-table-column> -->
        <el-table-column prop="createTime" label="报名时间" align="center"></el-table-column>

      </el-table>
    </el-drawer>

  </div>
</template>

<script>
import { getNotice, addNotice, updateNotice, deleteNotice, getApply } from '_api/Message/index.js'
export default {
  data() {
    return {
      drawer: false,
      labelPosition: "left",
      dialog_newly: false,
      dialog_change: false,
      form: {
        createName: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10,
        title: "",
        type: ""
      },
      formChange: {
        content: "",
        id: "",
        state: "",
        title: "",
        type: "",
        modifyTime: ""
      },
      formNew: {
        content: "",
        state: "",
        title: "",
        cover: "",
        type: ""
      },
      tableData: [],
      total: 0,
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            // [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image", "video"] // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: '请输入内容', //提示
        readyOnly: false, //是否只读
        theme: 'snow', //主题 snow/bubble
        syntax: true, //语法检测
      },
      formDetail: {
        id: "",
        current: 0,
        pageSize: 10,
        name: "",
        userNum: "",
        phone: ""
      },
      tableDataDetail: [],
      totalDetail: 0,


    }
  },
  methods: {
    showDetail(e) {
      this.formDetail.id = e.id
      getApply(this.formDetail).then(res => {
        if (res.data.success == true) {
          this.tableDataDetail = res.data.data.list
          this.totalDetail = res.data.data.total
        } else {
          this.tableDataDetail = res.data.data
          this.totalDetail = ""
          this.$message.info(res.data.message)
        }
      })
      this.drawer = true
    },
    getApply() {
      getApply(this.formDetail).then(res => {
        if (res.data.success == true) {
          this.tableDataDetail = res.data.data.list
          this.totalDetail = res.data.data.total
        } else {
          this.tableDataDetail = res.data.data
          this.totalDetail = ""
          this.$message.info(res.data.message)
        }
      })
    },
    resetApply() {
      this.formDetail.name = ""
      this.formDetail.userNum = ""
      this.formDetail.phone = ""

    },
    handleAvatarProgress(event, file, fileList) {
      console.log(event);
      console.log(file);
      console.log(fileList);

    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.formNew.cover = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleSelectionChange() {
    },
    search() {
      this.form.current = 0
      this.getNotice()
    },
    reset() {
      this.form = {
        createName: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10,
        title: "",
        type: ""
      }
      this.getNotice()
    },
    handleCurrentChange(e) {
      //当前页
      // console.log(e-1)
      this.form.current = (e - 1) * 10
      this.getNotice()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getNotice()
    },
    //公告信息查询
    getNotice() {
      getNotice(this.form).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        } else {
          this.tableData = res.data.data
          this.total = ""
          this.$message.info(res.data.message)
        }
      })
    },
    //新增公告信息
    addNotice() {
      addNotice(this.formNew).then(res => {
        console.log(res)
        if (res.data.success == true) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.reset()
            }
          })
        } else {
          this.$message(res.data.message)
        }
      }).catch(error => {
        this.$message(error.response.data.message)
      })
    },
    //删除公告信息
    deleteNotice(e) {
      this.$confirm('此操作将删除该公告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNotice(e).then(res => {
          console.log(res)
          if (res.status == 200) {
            this.$message({
              message: '删除成功!',
              duration: 1000,
              type: 'success',
              onClose: () => {
                this.reset()
              }
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    updateNotice(e) {
      this.dialog_change = true
      console.log(e)
      this.formChange.content = e.content
      this.formChange.id = e.id
      this.formChange.state = e.state.toString()
      this.formChange.title = e.title
      this.formChange.type = e.type.toString()

    },
    updateNoticeConfirm() {
      updateNotice(this.formChange).then(res => {
        if (res.status == 200) {
          this.dialog_change = false
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.reset()
            }
          })
        }
      })
    },

    // 失去焦点
    onEditorBlur(editor) { },
    // 获得焦点
    onEditorFocus(editor) { },
    // 开始
    onEditorReady(editor) { },
    // 值发生变化
    onEditorChange(editor) {
      this.formNew.content = editor.html;
      // console.log(editor);
    },

  },
  created() {
    this.getNotice()
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quillEditor;
    }
  },

};
</script>
<style lang="scss" >
.pagination {
  float: right;
  margin-top: 10px;
}

.search_button {
  margin-left: 80px;
}

.reset_button {
  margin-left: 20px;
}

.newly_button {
  margin-left: 0;
}

.dialogbutton {
  // margin-top: 40px;
}

// .editor {
//   line-height: normal !important;
//   height: 300px;
//   max-height: 1000px;
//   // overflow: auto;
//   width: 740px;
//   margin-bottom: 50px;
// }

// 给文本内容加高度，滚动条
.quill-editor .ql-container {
  min-height: 220px;
}

.ql-container {
  min-height: 230px;
}


.ql-snow .ql-tooltip [data-mode="link"]::before {
  content: "请输入链接地址:";
  left: 0;
}

.ql-snow .ql-tooltip.ql-editing {
  left: 0 !important;
}

.ql-snow .ql-tooltip {
  left: 0 !important;
}

.ql-snow .ql-editor {
  max-height: 300px;
}

.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px" !important;
  font-size: 14px;
}

// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
//   content: "10px" !important;
//   font-size: 10px;
// }

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
  content: "12px" !important;
  font-size: 12px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
  content: "16px" !important;
  font-size: 16px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
  content: "18px" !important;
  font-size: 18px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
  content: "20px" !important;
  font-size: 20px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
  content: "30px" !important;
  font-size: 30px;
}

// .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
// .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
//   content: "32px" !important;
//   font-size: 32px;
// }

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5" !important;
}

.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体" !important;
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "宋体" !important;
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "黑体" !important;
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑" !important;
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体" !important;
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋" !important;
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial" !important;
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "Times New Roman" !important;
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif" !important;
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}

// .ql-snow.ql-toolbar .ql-formats .ql-revoke {
//   background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
//   width: 20px;
//   height: 20px;
//   filter: grayscale(100%);
//   opacity: 1;
// }

// .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
//   background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
//   width: 20px;
//   height: 20px;
//   filter: none;
//   opacity: 0.9;
// }

// img {
//   filter: grayscale(100%);
//   opacity: 1;
// }

// img:hover {
//   filter: none;
//   opacity: 0.9;
// }

/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 125px;
  overflow: auto;
}





.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
